<template>
	<view style="min-height: 100vh;background: #FDFDFE;">
		<navbar name="我的推广明细"></navbar>
		<!-- 顶部 -->
		<view class="total-bean">
			<view class="total-bean-top">
				总健康豆：{{userResult.pointValue||''}}
				<!-- 6000 -->
			</view>
			<view class="total-bean-lower">
				<view class="total-bean-user">
					<view class="total-bean-image">
						<image
							:src="userResult.extenUserAvatarUrl||'http://static.bsyjk.cn/l/65872593C2124F8381198C89479F28D6.png'"
							style="width: 100%;height: 100%;"></image>
					</view>
					<view class="bean-user-view">
						<view class="user-name">
							<!-- 张万森 -->
							{{userResult.extenUserName||''}}
						</view>
						<!-- 13163838970 -->
						{{userResult.extenUserMobile||''}}
					</view>
				</view>
				<tabs name="chronicDisName" :list="list" :secondLevel="true" :is-scroll="true" :show-bar="false"
					active-color="#2EA7E0" :current="current" @change="change"></tabs>
			</view>
		</view>
		<!-- 积分列表 -->
		<view v-if="recordsList">
			<view class="mayView" v-for="(item,index) in recordsList" :key="index">
				<view class="userImage">
					<u-lazy-load border-radius="50" height="96" img-mode="aspectFill"
						:image=" item.userAvatarUrl||'http://static.bsyjk.cn/l/65872593C2124F8381198C89479F28D6.png'">
					</u-lazy-load>
				</view>
				<view class="image-tj ">
					<view class="image-tj-name">
						{{item.userName||'未知'}}
						<template v-if="item.newUserFlag===1">
							<image src="https://pics.leshiguang.com/vpage/2024/01/11/3ff88056607b443c9b6a4864373b29e1.png"></image>
						</template>
						<template v-else>
							<image src="https://pics.leshiguang.com/vpage/2024/01/11/aa428c7429eb4c1eab53e7794d9882c3.png"></image>
						</template>
					</view>
					扫码时间：{{item.createTime}}
					<!-- 2022-03-04 18:28:10 -->
				</view>
				<view class="integral-view">
					+{{item.pointValue}}
					<!-- 18 -->
				</view>
			</view>
		</view>



		<!-- 暂无数据 -->
		<view>
			<view class="loading-lou" v-if="loadings && pageCurrent>1">
				<view class="loading-san-lou">
					<u-loading size="40" :show="loadings"></u-loading>
					<view class="logintext-lou">一大波数据正在赶来~~</view>
				</view>
			</view>
			<view class="nodata-more-lou" v-if="nodata && !empty">
				没有更多数据
			</view>
			<view class="loading-box" v-if="loadings&&pageCurrent==1">
				<u-loading :show="loadings" color="#2EA7E0" size="70"></u-loading>
				<view class="loading-textsl">
					加载中
				</view>
			</view>
			<!-- 暂无数据 -->
			<view class="nodata-box-lou" v-if="recordsList.length == 0">
				<image style="width: 500rpx;height: 500rpx;"
					src="http://static.bsyjk.cn/kong/EEBB1394BA9A48259613083E2078A3F1.png" mode=""></image>
				<view class="loading-textsl">
					暂无数据
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"

import uLazyLoad from "@/uview-ui/components/u-lazy-load/u-lazy-load.vue"


	import tabs from '../../components/u-tabs/u-tabs.vue'
	export default {
		components: {
			tabs,
			uLazyLoad,
			uLoading
		},
		data() {
			return {
				current: 0,
				open: false, //测试展开收起 对接口时换值
				keyword: '', //切换条件
				pageCurrent: 1, //页码
				pageSize: 10, //条数
				is_pull: false,
				loadings: false,
				recordsList: [], //数据
				last_page: '', //总页数
				loadingone: false,
				nodata: false, //没有更多数据
				empty: false, //是否一条数据都没有




				chronicDisId: '', //搜索id
				keyword: '', //搜索名
				userResult: {

				},
				list: [],
				current: 0,
				pageCurrent: 1, //加载页
				pageSize: 10, //加载条
			}
		},
		onLoad(e) {
			this.getListTg()
		},
		onReachBottom: function() { //分页加载
			//判断总页数是否大于1
			if (this.last_page > 1) {
				//判断当前是否处于上拉加载中
				if (this.is_pull == false) {
					//判断当前页是否小于总页数
					if (this.pageCurrent < this.last_page) {
						this.is_pull = true; //激活上拉状态
						this.pageCurrent++; //当前页数加1
						this.extenDetail(true) //分页加载
					} else {
						this.nodata = true;
					}
				}
			}
		},
		methods: {
			extenDetail(onReach) {
				this.$api.get(global.apiUrls.extenDetail, {
					chronicDisId: this.chronicDisId,
					keyword: this.keyword,
					pageCurrent: this.pageCurrent,
					pageSize: this.pageSize
				}).then(res => {

					let recordsList = res.data.result.records;
					recordsList.forEach((item) => {
						item.createTime = this.$basejs.thisday(item.createTime, true)
					})
					if (!recordsList.length && this.pageCurrent == 1) {
						this.empty = true;
					}
					if (recordsList == null) {
						recordsList = [];
					}
					if (onReach) {
						this.recordsList = [...this.recordsList, ...recordsList];
					} else {
						this.recordsList = recordsList
					}
					this.is_pull = false;
					this.loadings = false;
					if (res.data.result.pages == null) {
						res.data.result.pages = 0;
					}
					this.last_page = res.data.result.pages;
					if (this.pageCurrent > this.last_page || res.data.result.pages == 1) {
						this.nodata = true;
					}

				})
			},
			// 推广明细
			getListTg(e) {
				this.$api.get(global.apiUrls.getListTg, {}).then(res => {
					let result = res.data.result;
					this.userResult = result;

					let chronicVOS = JSON.parse(JSON.stringify(result.chronicVOS));
					chronicVOS.forEach((item) => {
						item.twoName = '健康豆：' + item.pointValue
					})
					this.list = chronicVOS
					this.chronicDisId = this.list[0].chronicDisId
					this.extenDetail() //获取列表
				})
			},
			change(e) {
				console.log(e, '11888888888888888888')
				this.current = e;
				this.pageCurrent = 1 //加载页
				this.chronicDisId = this.list[this.current].chronicDisId
				this.extenDetail() //获取列表
			}
		}
	}
</script>

<style lang="scss">
	.total-bean {
		width: 720rpx;
		margin: 30rpx auto 0;

		.total-bean-top {
			width: 720rpx;
			height: 114rpx;
			background: url(https://static.bsyjk.cn/health-pg/2E165323C8EE47EC902A95A24679A025.png) no-repeat;
			background-size: 100% 200rpx;
			border-radius: 20rpx 20rpx 0px 0px;
			font-size: 32rpx;
			line-height: 114rpx;
			padding: 0 30rpx;
			color: #fff;
		}

		.total-bean-lower {
			height: 278rpx;
			background: #fff;
			border-radius: 0px 0px 20rpx 20rpx;
			overflow: hidden;
			background: url('http://static.bsyjk.cn/integralBg/85FF98D418224634B556FABA62625D1B.png')no-repeat;
			background-size: 720rpx 164rpx;
			box-shadow: 0px 30px 60px 0px rgba(138, 149, 158, 0.2);

			.total-bean-user {
				height: 190rpx;
				position: relative;
				display: flex;

				.total-bean-image {
					width: 112rpx;
					height: 112rpx;
					margin: 30rpx 24rpx 0 30rpx;

					image {
						border-radius: 14rpx;
					}
				}

				.bean-user-view {
					font-size: 22rpx;
					color: #A1A1A1;

					.user-name {
						font-size: 32rpx;
						color: #2D2D2D;
						padding: 40rpx 0 10rpx;
					}
				}
			}
		}
	}

	.mayView {
		height: 150rpx;
		display: flex;
		padding: 20rpx 20rpx 30rpx;
		border-bottom: 1px solid #f5f5f5;

		.userImage {
			width: 96rpx;
			height: 96rpx;
			margin-right: 20rpx;
		}

		.image-tj {
			width: 500rpx;
			font-size: 24rpx;
			color: #9B9B9B;

			.image-tj-name {
				font-size: 26rpx;
				color: #333333;
				padding: 4rpx 0 10rpx;
				display: flex;
				align-items: center;

				image {
					width: 86rpx;
					height: 38rpx;
					margin-left: 10rpx;
				}
			}
		}

		.integral-view {
			width: 100rpx;
			text-align: right;
			padding-top: 10rpx;
		}
	}

	.nodata-box-lou {
		top: 540rpx;
	}
</style>
